<!DOCTYPE html>
<html lang=en>
<head>
<script src="../../resources/js-test.js"></script>
<style>
#testid { background-color: red; }
#testID2 { background-color: red; }
.testclass { background-color: red; }
.testClass2 { background-color: red; }
</style>
</head>
<body>
<div id=testid>id test</div>
<style>
#testid { background-color: green }
</style>
<div class=testclass>class test</div>
<style>
.testclass { background-color: green; }
</style>
<div id=testID2>case insensitive id test</div>
<style>
#TESTid2 { background-color: green }
</style>
<div class=testClass2>case insensitive class test</div>
<style>
.TESTclass2 { background-color: green; }
</style>
<script>
description("Test that elements before inline stylesheets get their style updated properly");
shouldBe('window.getComputedStyle(document.getElementById("testid")).backgroundColor','"rgb(0, 128, 0)"');
shouldBe('window.getComputedStyle(document.getElementsByClassName("testclass")[0]).backgroundColor','"rgb(0, 128, 0)"');
shouldBe('window.getComputedStyle(document.getElementById("testID2")).backgroundColor','"rgb(255, 0, 0)"');
shouldBe('window.getComputedStyle(document.getElementsByClassName("testClass2")[0]).backgroundColor','"rgb(255, 0, 0)"');
</script>
</body>
